﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WordPaster form xheditor 1.x</title>
	<!--<script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>-->
    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="xheditor-1.1.13-zh-cn.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />
    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
	<script type="text/javascript" src="WordPaster/js/w.js" charset="utf-8"></script>
	<script type="text/javascript" src="zyCapture/z.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyOffice/js/o.js" charset="utf-8"></script>
	<script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="demo.js" charset="utf-8"></script>
	<style type="text/css">
		.imagepaster{background: transparent url(WordPaster/paster.png) no-repeat; background-position:3px 2px;}
		.importwordtoimg{background: transparent url(WordPaster/word1.png) no-repeat; background-position:3px 2px;}
		.netpaster{background: transparent url(WordPaster/ico.png) no-repeat; background-position:3px 2px;}
		.wordimport{background: transparent url(WordPaster/word2.png) no-repeat; background-position:3px 2px;}
		.excelimport{background: transparent url(WordPaster/xls.png) no-repeat; background-position:3px 2px;}
		.pptimport{background: transparent url(WordPaster/ppt.png) no-repeat; background-position:3px 2px;}
		.pdfimport{background: transparent url(WordPaster/pdf.png) no-repeat; background-position:3px 2px;}
		.zycapture{background: transparent url(zyCapture/z.png) no-repeat; background-position:3px 2px;}
		.importword{background: transparent url(zyOffice/css/w.png) no-repeat; background-position:3px 2px;}
		.importpdf{background: transparent url(zyOffice/css/pdf.png) no-repeat; background-position:3px 2px;}
		.exportword{background: transparent url(zyOffice/css/exword.png) no-repeat; background-position:3px 2px;}
	</style>
</head>
<body>
	<div style=" font-size:medium; line-height:130%;">
		<p>演示方法：</p>
		<ul style="list-style-type:decimal;">
			<li>打开Word文档，复制多张图片，然后在编辑器中按 Ctrl+V 粘贴，编辑器将自动上传所有图片。</li>
			<li>复制电脑中任意图片文件，然后点击编辑器中的图片粘贴按钮。</li>
			<li>通过QQ或其它软件截屏，复制图片，然后点击编辑器中的图片粘贴按钮。</li>
		</ul>
		<p>相关问题：</p>
		<ul style="list-style-type:decimal;">
			<li>安装插件<a target="_blank" href="http://www.ncmem.com/webapp/wordpaster/pack.aspx">下载插件</a></li>
		    <li>WindowxXP/Windows7/Windows2003如果无法识别数字证书，请先下安装<a target="_blank" href="http://www.ncmem.com/download/WoSignRootUpdate.rar">数字签名根证书</a></li>
		</ul>
	</div>
	<div id="demos"></div>	
	<div id="xhe">
        <xheditor ref="xhe"></xheditor>
    </div>
	<script>
        Vue.component('xheditor', {
            data: function(){
                return {
                    editor: null
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted: function(){
            	var pos = window.location.href.lastIndexOf("/");
		        var api = [
		            window.location.href.substr(0, pos + 1),
		            "upload.jsp"
		        ].join("");
            	WordPaster.getInstance({
            		//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
        	        PostUrl:api,
					//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
					ImageUrl: "",
					//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
					FileFieldName: "file",
					//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
					ImageMatch: '',
        	        Cookie: '<%=clientCookie%>',
        	        event:{
						dataReady:function(e){
							//e.word,
							//e.imgs:tag1,tag2,tag3
							console.log(e.imgs)
						}
					}        	        
        	    });//加载控件
		
                //zyCapture
                zyCapture.getInstance({
                    config: {
                        PostUrl: api,
                        FileFieldName: "file",
                        Fields: { uname: "test" }
                    }
                });

                //zyoffice
                //使用前请在服务端部署zyOffice，
                //http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
                zyOffice.getInstance({
                    word:"http://localhost:13710/zyoffice/word/convert",
                    wordExport:"http://localhost:13710/zyoffice/word/export",
                    pdf:"http://localhost:13710/zyoffice/pdf/upload"
                });

                var editor;
                $(pageInit);
                function pageInit() {
                    var allPlugin = {
                        imagepaster: { c: 'imagepaster', t: 'Word一键粘贴', e: function() { WordPaster.getInstance().Paste(); } },
                        mportwordtoimg: { c: 'importwordtoimg', t: 'Word转图片', e: function () { WordPaster.getInstance().importWordToImg(); } },
                        netpaster: { c: 'netpaster', t: '自动上传网络图片', e: function() { WordPaster.getInstance().UploadNetImg(); } },
                        wordimport: { c: 'wordimport', t: '导入Word文档', e: function () { WordPaster.getInstance().importWord(); } },
						excelimport: { c: 'excelimport', t: '导入Excel文档', e: function () { WordPaster.getInstance().importExcel(); } },
                        pptimport: { c: 'pptimport', t: '导入PPT文档', e: function () { WordPaster.getInstance().importPPT(); } },
                        pdfimport: { c: 'pdfimport', t: '导入PDF文档', e: function () { WordPaster.getInstance().ImportPDF(); } },
                        zycapture: { c: 'zycapture', t: '截屏（zyCapture）', e: function () { window.zyCapture.Capture2(); } },
                        importword: { c: 'importword', t: '导入Word文档（docx）', e: function () { window.zyOffice.api.openDoc(); } },
                        exportword: { c: 'exportword', t: '导出Word文档（docx）', e: function () { window.zyOffice.api.exportWord(); } },
                        importpdf: { c: 'importpdf', t: '导入PDF文档', e: function () { window.zyOffice.api.openPdf(); } }
                    };
                    editor = $('#editor').xheditor({ plugins: allPlugin, tools: 'zycapture,imagepaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf,Source,Fullscreen,About' });
                    WordPaster.getInstance().SetEditor(editor);
                    zyCapture.setEditor(editor);
                    zyOffice.SetEditor(editor);
                }
            },
            methods: {},
            destroyed: function(){},
            template: '<div><textarea id="editor" name="editor" rows="12" cols="80" style="width:100%;height:180px;"/><p>泽优全平台内容发布解决方案 for jsp xhEditor</p><p>泽优Word一键粘贴控件（WordPaster）</p><p>泽优全平台截屏控件（zyCapture）</p><p>泽优Office文档转换服务（zyOffice）</p></div>'
        });

        var xhe = new Vue({
            el: '#xhe',
            data: {
            }
            , mounted: function () {
            }
        });
    </script>
</body>
</html>
